<template>
  <div>
      <h1>分类展示</h1>
      <div>
          <table border="1">
            <tr>
                <th>id</th>
                <th>分类</th>
                <th>操作</th>
            </tr>
            <tr v-for="cate in cate_list" :key="cate.id">
                <td>{{cate.id}}</td>
                <td><router-link :to="{'path':'/goods_list',query:{'id':cate.id}}">{{cate.name}}</router-link></td>
                <td>
                    <el-button @click="del(cate.id)">删除</el-button>
                </td>
            </tr>
        </table>
        <br>
        <button @click="up">上一页</button>
        <button v-for="p in page_list" :key="p" @click="jum(p)">{{p}}</button>
        <button @click="down">下一页</button>
      </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            base_url:"http://127.0.0.1:8000",
            num:1,
            cate_list:[],
            page_list:[],
            page_sum:0

        }
    },
    methods: {
        down(){
            if(this.num<=this.page_sum){
                this.num ++
                this.get_cate()
            }
        },
        up(){
            if(this.num>1){
                this.num --
                this.get_cate()
            }
        },
        jum(p){
            this.num = p
            this.get_cate()
        },
        get_cate(){
            axios.get(this.base_url + '/app01/cate?num='+this.num).then(res=>{
                console.log(res.data)
                this.cate_list=res.data.data
                this.page_list=res.data.page_list
                this.page_sum =res.data.page_sum
            })    
        },
        del(id){
            axios({
                url:this.base_url + '/app01/cate',
                method:'delete',
                params:{'id':id}
            }).then(res =>{
                if(res.status==200){
                    alert("删除成功")
                    this.get_cate()  
                }
            })
        },    
    },
    created() {
        this.get_cate()
    }
}
</script>

<style>
table{
    width: 500px;
    /* height: 500px;  */
    border: solid black;
    margin: 0 auto;
    border-collapse:collapse
}
th,td{
    border: green solid;
    border-collapse:collapse
}
a{
    padding: 5px 10px;
    border: 1px solid lightblue;
    margin-right: 10px;
    cursor: pointer;
}
</style>